<template>
  <div class="_wz_cent_main _wz_problemProcessingDetails">
    <Card dis-hover :bordered="true" style="margin-bottom: 10px;">
      <p slot="title">问题详情</p>
      <Form label-position="right" :label-width="120">
        <Row>
          <Col span="12">
            <FormItem label="上报人：">
              <div style="line-height: 34px">{{!!selectData.userName ? selectData.userName : '--'}}</div>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="处理状态：">
              <div style="line-height: 34px">{{!!selectData.reportStatus ? selectData.reportStatus : '--'}}</div>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="指定处理人：">
              <div style="line-height: 34px">{{!!selectData.toManagerName ? selectData.toManagerName : '--'}}</div>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="运输企业：">
              <div style="line-height: 34px">{{!!selectData.deptName ? selectData.deptName : '--'}}</div>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="上报内容：">
          <div style="line-height: 34px">{{!!selectData.reportContent ? selectData.reportContent : '--'}}</div>
        </FormItem>
        <FormItem label="上报图片：">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in JSON.parse(selectData.reportImg)">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item?apiUrl.imgUrl+item:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </div>
          </div>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="margin-bottom: 10px;" v-if="safetyProblemReplyPageList.length > 0">
      <p slot="title">问题反馈</p>
      <Form label-position="right" :label-width="120">

        <template v-for="item,index in safetyProblemReplyPageList">
          <Divider orientation="left">{{index + 1}}、 {{!!item.replyUserName ? item.replyUserName : '--'}}</Divider>
          <FormItem label="回复时间：">
            <div style="line-height: 34px">{{!!item.replyTime ? item.replyTime : '--'}}</div>
          </FormItem>
          <FormItem label="回复内容：">
            <div style="line-height: 34px">{{!!item.replyContent ? item.replyContent : '--'}}</div>
          </FormItem>
          <FormItem label="回复图片：" v-if="!!item.replyImg">
            <div style="min-height:50px;">
              <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="items,index in JSON.parse(item.replyImg)">
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                    <img :src="!!item?apiUrl.imgUrl + items:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </div>
            </div>
          </FormItem>
        </template>
      </Form>
    </Card>


    <Card dis-hover :bordered="true">
      <p slot="title">问题处理</p>
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="回复内容"  prop="replyContent">
          <i-input v-model="formData.replyContent" placeholder="请填写回复内容" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
        <FormItem label="回复图片">
          <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="imgListFun">
            <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
          </Upload>
          <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
            <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in imgList">
              <div class="_wz_insertimage" style="display: block;">
                <img :src="item" @error="public.imgDispose" />
                <div class="_wz_insertimage-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="imgListRem(index)"></Icon>
                </div>
              </div>
            </div>
          </div>
        </FormItem>
      </Form>
    </Card>

    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>


    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      safetyProblemReplyPageList:[],//问题反馈list
      formData:{reportUuid:this.selectData.uuid},//
      imgListList:[],//隐患资料
      imgList:[],
      //缩略图
      visible: false,
      imgSrc: "",
      ruleValidate: {//正则
        replyContent: [
          {required: true, message: '请填写回复内容', trigger: 'blur'}
        ],
      }
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

    let that = this;
    that.spinShow = true;
    that.axios.post(that.apiUrl.safetyProblemReplyPageList, {reportUuid: that.selectData.uuid,page:1,limit:9999}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.safetyProblemReplyPageList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法

    //隐患资料
    imgListFun(file) {//新增的时候 处理图片数据
      let that = this; //如果是文件  就展示文件名
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.imgList.push(window.URL.createObjectURL(file));
        that.imgListList.push(file);
      } else {
        this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //缩略图查看
    handleView(src) {
      this.imgSrc = src;
      this.visible = true;
    },
    //删除
    imgListRem(index){
      this.imgList.splice(index, 1)
      this.imgListList.splice(index, 1)
    },
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使用

          let data = that.formData;
          let formData = new FormData();

          for (let key in data) {
            formData.append(key, data[key]);
          }
          //图片赋值
          that.imgListList.forEach(function (k, i) {
            formData.append('imgList', k);
          })

          that.axios.post(that.apiUrl.safetyProblemReplyAddReply, formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success('保存成功');
              that.$emit('closeFun', true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_problemProcessingDetails{
  height: 100%;
  overflow: auto;
  padding: 0 0 53px 0;
  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
